import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

import zhcnLocale from '@fullcalendar/core/locales/zh-cn';
// import { Modal } from 'antd';

import moment from 'moment';

moment.locale('zh-cn');

export default class CustomCalendar extends React.Component {
  calendarComponentRef = React.createRef();

  // state = {
  //   calendarWeekends: true,
  //   calendarEvents: [
  //     {
  //       title: '土地资源管理',
  //       start: new Date('2019-05-08 08:00:00'),
  //       end: new Date('2019-05-08 09:50:00'),
  //       description: '测绘院楼 101',
  //       rendering: 'background', // 设置背景色
  //       color: '#ff9f89',
  //     },
  //     {
  //       title: '土地资源管理',
  //       start: new Date('2019-05-09 10:10:00'),
  //       end: new Date('2019-05-09 12:00:00'),
  //       description: '测绘院楼 101',
  //       rendering: 'background',
  //       overlop: false, // 不允许覆盖
  //     },
  //   ],
  //   modalVisible: false,
  //   clickArgs: null,
  // };

  // toggleWeekends = () => {
  //   const { calendarWeekends } = this.state;

  //   this.setState({
  //     calendarWeekends: !calendarWeekends,
  //   });
  // };

  gotoPast = () => {
    const calendarApi = this.calendarComponentRef.current.getApi();
    calendarApi.gotoDate('2000-01-01'); // call a method on the Calendar object
  };

  // handleDateClick = arg => {
  //   this.setState({
  //     modalVisible: true,
  //     clickArgs: arg,
  //   });
  // };

  // handleModalCancel = () => {
  //   this.setState({
  //     modalVisible: false,
  //   });
  // };

  // handleAddSubject = () => {
  //   const { calendarEvents, clickArgs } = this.state;

  //   this.setState({
  //     calendarEvents: calendarEvents.concat({
  //       title: '新课程',
  //       start: clickArgs.date,
  //       end: clickArgs.date.getTime() + 1000 * 60 * 110,
  //       description: '这是一段描述',
  //     }),
  //     clickArgs: null,
  //     modalVisible: false,
  //   });
  // };

  render() {
    const calendarOptions = {
      locale: zhcnLocale,
      weekNumberCalculation: 'local',
      slotDuration: '00:30:00',
      defaultView: 'timeGridWeek',
      header: {
        //       left:   'title',
        // center: '',
        // right:  'today prev,next'
        left: '',
        center: '',
        right: '',
      },

      nowIndicator: true,
      plugins: [timeGridPlugin, dayGridPlugin, interactionPlugin],
      titleFormat: { year: 'numeric', month: 'long', day: 'numeric' }, // 顶部title样式
      defaultRangeSeparator: ' - ',
      minTime: '08:00:00', // timeline 开始时间
      maxTime: '21:30:00', // timeline 结束时间
      displayEventEnd: true,
      eventTimeFormat: {
        hour: '2-digit',
        minute: '2-digit',
      },
      height: 'auto',
      columnHeaderText: date => moment(date).format('dddd'),
      resources: [],
    };

    const { events } = this.props;

    return (
      <>
        <FullCalendar
          ref={this.calendarComponentRef}
          events={events}
          dateClick={this.handleDateClick}
          {...calendarOptions}
        />
        {/* <Modal
          visible={modalVisible}
          title="添加课程"
          onCancel={this.handleModalCancel}
          onOk={this.handleAddSubject}
        >
          在里面加一点表单 根据表单显示添加的东西
        </Modal> */}
      </>
    );
  }
}
